import mockData from './mockData'
export default {
    install(Vue) {
        // 自定义指令
        Vue.directive('btnAuth', {
            //钩子函数，只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
            /*
             * el:指令所绑定的元素，可以用来直接操作 DOM
             * binding：一个对象，包含以下 property:
             *   name：指令名，不包括 v- 前缀。
             *   value：指令的绑定值
             *   expression：字符串形式的指令表达式。
             *   arg：传给指令的参数，可选。
             *   modifiers：一个包含修饰符的对象。
             * vnode：Vue 编译生成的虚拟节点
             */
            inserted: (el, binding, vnode) => {
                // console.log('el===>',el)
                // console.log('binding===>',binding)
                // console.log('binding.value===>',binding.value)
                // console.log('vnode===>',vnode)
                // 这里能拿到按钮类型和路由，除了做按钮权限，其实还可以做前端埋点
                const { path, type } = binding.value
                if (binding.value) {
                    mockData.some(item => {
                        if (item.path === path && item.type.includes(type)) {
                            // el.style.display = ''
                        } else {
                            // el.style.display = 'none'
                            // 只是在通过css来隐藏是有风险，用户可以通过控制台将样式添加上去，所以这里直接删除节点
                            el.parentNode.removeChild(el)
                        }
                    })
                }
            }
        })
    }
}
